<template>
  <div id="vClock">
    <div>
      vs编译就是不一样啊安东方大道22
    </div>
    <p v-cloak>+++++++{{msg}}-------</p>
    <!--v-text会覆盖原内容 插值表达式只会替换自己所占的位置-->
    <h4 v-text="msg">===============</h4>
    <!--v-html中标签会被执行-->
    <div v-html="msg2">12312</div>
    <input type="button" value="按钮" :title="mytitle" @click="show">
    <!--数据的双向绑定
    ☆ v-model只能用于表单元素中
    -->
    <input type="text" style="width: 100%;" v-model="msg">

    <div>
      <input type="number" v-model="num1">
      <select v-model="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>
      <input type="number" v-model="num2">
      <input type="button" value="=" @click="compute">
      <input type="text" v-model="result">
    </div>
    <!--vue中的class
    绑定class方式： :class
    class里面可以是一个数组，可以是一个对象，可以进行三目运算符
    -->
    <div class="red parOne">
      噢噢噢噢
    </div>

    <div :class="['parTwo','parThree']">
      噢噢噢噢
    </div>

    <div :class="['parTwo','parThree',falgT ? 'parFour' : 'parFive']">
      噢噢噢噢
    </div>

    <div :class="['parTwo','parThree',{'parFive' : falgT}]">
      噢噢噢噢
    </div>

    <div :class="objectTest">
      噢噢噢噢
    </div>
    <!--style样式绑定 :style -->
    <div :style="[object01,object02]">哈哈哈哈哈哈</div>
    <p v-for="(val, key, i) in user" :key="key">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>
    <div style="width: 200px; height: 200px; background-color: bisque" @click="testClick">
      <p>{{padTest}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'first',
  data () {
    return {
      falgT: true,
      msg: '关于v-clock指令',
      msg2: '<h1>这个是第二条消息</h1>',
      mytitle: '这是一个标题',
      num1: 0,
      num2: 0,
      opt: '+',
      result: 0,
      padTest: '2',
      objectTest: {
        parThree: true,
        fiveWidth: true
      },
      object01: {
        color: 'red',
        'font-size': '20px'
      },
      object02: {
        width: '200px',
        height: '200px',
        'background-color': 'blue'
      },
      user: {
        id: 1,
        name: '托尼·屎大颗',
        gender: '男'
      }
    }
  },
  methods: {
    show: function () {
      alert('aaa')
      this.falgT = !this.falgT
    },
    compute () {
      this.result = parseInt(this.num1) + parseInt(this.num2)
    }
  }
}
</script>

<style scoped>
  .red {
    background-color: red;
  }
  .parOne {
    color: #ffffff;
    font-size: 30px;
  }
  .parTwo {
    color: #000;
  }
  .parThree {
    background-color: gold;
    width: 200px;
    height: 30px;
  }
  .parFour {
    background-color: aquamarine;
  }
  .parFive {
    background-color: rebeccapurple;
  }
  .fiveWidth {
    width: 200px;
    height: 100px;
  }
</style>
